<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-row>

      <el-col>
        <el-form-item label="项目名:">
          <el-input placeholder="请输入" v-model="form.projectname" :disabled="true" style="width: 500px"></el-input>
        </el-form-item>
      </el-col>

      <el-col>
        <el-form-item label="分支:">
          <el-select v-model="form.branch" placeholder="请选择分支" @change="branchChange" style="width: 500px">
            <el-option v-for="(item, index) in branchList" :key="index" :label="item.name" :value="item.name"></el-option>
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item label="作者:">
          <el-input placeholder="请输入" :disabled="true" v-model="form.committername" style="width: 195px"></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item label="构建版本:">
          <el-input placeholder="请输入" :disabled="true" v-model="form.shortid" style="width: 195px"></el-input>
        </el-form-item>
      </el-col>

      <el-col >
        <el-form-item label="版本描述:">
          <el-input v-model="form.message" placeholder="请选择版本描述" :disabled="true" style="width: 500px"></el-input>
        </el-form-item>
      </el-col>

      <el-col >
        <el-form-item label="地址:">
          <el-input placeholder="请输入" v-model="form.giturl" :disabled="true" style="width: 500px"></el-input>
        </el-form-item>
      </el-col>

      <el-col >
        <el-form-item label="编译指令:">
          <el-input placeholder="请输入" v-model="form.command" style="width: 500px"></el-input>
        </el-form-item>
      </el-col>

      <el-col >
        <el-form-item label="镜像:">
          <el-input placeholder="请输入" v-model="form.fromimages" style="width: 500px"></el-input>
        </el-form-item>
      </el-col>

      <el-col >
        <el-form-item>
          <el-button type="primary" @click="onSubmit">构建</el-button>
          <el-button @click="handleClose">取消</el-button>
        </el-form-item>
      </el-col>
      <!--el-col :span="12">
        <el-form-item label="版本信息:">
          <el-input placeholder="请输入" v-model="form.message"></el-input>
        </el-form-item>
      </el-col-->
    </el-row>

  </el-form>
</template>

<script>
import { branchSeach, getBranchList, buildApplication } from "@/api/application.js";
export default {
  data() {
    return {
      form: {
        projectname: "",
        branch: "master",
        committername: "",
        shortId: "",
        message: "",
        giturl: "",
        command: "", // 指令
        fromimages: ""
      },
      branchList: [],
      info: {}
    };
  },
  methods: {
    async show(form) {
      this.info = { ...form };
      // 预加载
      try {
        const branchList = await getBranchList();
        this.branchList = branchList.data;
      } catch (error) {
        console.log(error);
      }
      // 加载内容
      this.getDate();
    },
    // 改变内容
    branchChange() {
      this.getDate();
    },
    async getDate() {
      try {
        const res = await branchSeach({
          id: this.info.id,
          branch: this.form.branch
        });
        this.form = { ...res.data };
      } catch (error) {
        console.log(error);
      }
    },
    onSubmit() {
      if( this.form.command == undefined ) {
        this.$message.error("请输入编译指令");
        return
      }

      if( this.form.fromimages == undefined ) {
        this.$message.error("请输入基础镜像");
        return
      }

      buildApplication(this.form);
      this.handleClose();
      // this.$emit("Submit", this.form);
    },
    handleClose() {
      this.$emit("handleClose");
    }
  }
};
</script>

<style lang="scss" scoped></style>
